<template>
    <div slot="content" style="height:auto;width: 90%;margin-left: 30px;" v-loading="bodyLoading">
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/order/order_list/' }">订单管理</el-breadcrumb-item>
                    <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>

            <el-form :model="bizForm" :rules="rules" ref="bizForm" label-width="120px">
                <el-col :span="18" class="warp-breadcrum">
                    <div class="tit-6">
                        确认订单信息
                    </div>
                </el-col>
                <el-col :span="3" class="warp-breadcrum">
                    <el-row>
                        <el-col :span="12">
                            <el-form :inline="true">
                                <el-form-item>
                                    <el-upload
                                            class="avatar-uploader"
                                            :headers="headOb"
                                            :action="fileActionUrl"
                                            :show-file-list="false"
                                            :multiple="true"
                                            :on-success="handleBatchBankCertSuccess"
                                            :before-upload="beforeBatchBankCertUpload">
                                        <el-button slot="trigger" size="small" type="primary">上传汇款凭证</el-button>
                                    </el-upload>
                                    <el-button size="small" type="default" v-if="false" @click="search()">刷新</el-button>

                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
                    <!--列表-->
                    <el-table stripe :data="bizDomains.data" highlight-current-row v-loading="loading"
                              style="width: 100%;">
                        <el-table-column type="index" width="60">
                        </el-table-column>
                        <el-table-column prop="obj_name" label="发函对象">
                        </el-table-column>
                        <el-table-column prop="obj_id_nbr" label="证件号码" min-width="150">
                        </el-table-column>
                        <el-table-column prop="address" label="联系地址" min-width="150">
                        </el-table-column>
                        <el-table-column prop="tel" label="联系方式">
                        </el-table-column>
                        <el-table-column prop="email" label="联系邮箱">
                        </el-table-column>
                        <el-table-column prop="contract_nbr" label="借款合同编号" min-width="100">
                        </el-table-column>
                        <el-table-column prop="lender" label="出借人">
                        </el-table-column>
                        <el-table-column prop="borrower" label="借款人">
                        </el-table-column>
                        <el-table-column prop="guarantor" label="担保人">
                        </el-table-column>
                        <el-table-column prop="loan_amount" label="借款本金">
                        </el-table-column>
                        <el-table-column prop="annual_rate" label="利率%">
                        </el-table-column>
                        <el-table-column prop="lend_date" :formatter="dateFormat" label="出借日期">
                        </el-table-column>
                        <el-table-column prop="repay_date" :formatter="dateFormat" label="还款日期">
                        </el-table-column>
                        <el-table-column prop="overdue_amount" label="逾期本金">
                        </el-table-column>
                        <el-table-column prop="overdue_fine_amount" label="逾期违约金">
                        </el-table-column>
                        <el-table-column prop="bank_cert" label="汇款凭证文件名" min-width="120">
                        </el-table-column>
                        <el-table-column property="operate" label="是否上传汇款凭证" width="180">
                            <template scope="scope">
                                <i v-if="scope.row.bank_cert_file_id == null " class="el-icon-warning"
                                   style="color: #E6A23C">未上传</i>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-form>


        </el-row>
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <div class="tit-6">
                    提交订单
                </div>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div class="dialog-footer">
                    <el-button size="medium" type="default" @click="$router.go(-1)">返回</el-button>
                    <el-button size="medium" type="danger" :disabled="cancleBtnDisabled" @click="doCancleOrder()">取消订单
                    </el-button>

                    <el-button size="medium" type="primary" :disabled="submitBtnDisabled" @click="confirmOrder()">提交订单
                    </el-button>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="支付订单" :visible.sync="dialogPayOrderVisible" :close-on-click-modal="false" :show-close="false">
            <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单编号：">
                            <span v-if="orderForm.orderNo">{{orderForm.orderNo}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借款合同数：">
                            <span v-if="orderForm.loanContractNum">{{orderForm.loanContractNum}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发函对象数：">
                            <span v-if="orderForm.collectionObjNum">{{orderForm.collectionObjNum}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单费用：">
                            <span v-if="orderForm.amountShow">{{orderForm.amountShow}} 元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="帐户余额：">
                            <span v-if="orderForm.accountBalance != null">{{orderForm.accountBalanceShow}} 元</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <template>
                    <a href="#" @click="$router.push('/order/order_list/')"
                       v-if="orderForm.accountBalance<orderForm.amountShow" class="el-icon-warning"
                       style="color: #E6A23C">您帐户余额不足，请先充值!</a>
                </template>
                <el-button @click.native="canclePayOrder">退 出</el-button>
                <el-button type="primary" :disabled="orderForm.accountBalance<orderForm.amountShow"
                           @click.native="okPayOrder">支 付
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import bizAPI from '../../api/api_order';
    import tgImg from '@/components/base/TG_IMG'
    import axios from 'axios'
    import Vue from 'vue'

    export default {
        name: "order_oper",
        components: {tgImg},
        data() {
            return {
                fileActionUrl: this.$proper.backEndUrl + '/file/uploadFile',
                headOb: {'authToken': localStorage.getItem('authToken')},

                //金融机构ID
                orderId: '',

                bizForm: {
                    id: -1

                },
                rules: {
                    enterpriseName: [
                        {required: true, message: '请输入金融机构名称', trigger: ['blur', 'change']}
                    ]
                },
                bizDomains: [],
                orderForm: {
                    orderNo: '',
                    loanContractNum: '',
                    collectionObjNum: '',
                    amount: '',
                    amountShow: '',
                    accountBalance: '',
                    accountBalanceShow: ''

                },
                members: [],
                users: [],
                referrers: [],
                submitBtnDisabled: false,//提交订单按钮是否禁用
                cancleBtnDisabled: false,//取消订单按钮是否禁用
                loading: true,
                bodyLoading: true,
                dialogPayOrderVisible: false  //支付订单对话框是否显示
            }
        },
        created() {

            let bizId = this.$route.params.id;
            console.log("bizId:" + bizId);
            console.log(this.$route.params);
            this.bizForm.id = bizId;
            if (bizId) {
                bizAPI.qryOrderInfos({'id': bizId}).then(res => {

                    console.log(1111111111111111111111111);
                    //console.log(res);

                    Object.assign(this.bizDomains, res);
                    this.loading = false;
                    this.bodyLoading = false;
                })
            } else {
                this.loading = false;
            }

        },
        methods: {

            //显示转换
            //时间格式化
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return date.substring(0, 10);
            },

            submitForm(formName) {
                let _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        bizAPI.doAddOrUpdate(this.bizForm).then(result => {
                            _this.$message({
                                message: result.message,
                                type: (result.code === '0000') ? 'success' : 'error'
                            });

                            _this.$router.go(-1);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            //上传贷款凭证
            handleBatchBankCertSuccess(res, file) {
                let me = this
                if (res.code === '0000') {
                    let params = {
                        'bankCertFileId': res.data.id,
                        'bankCertFileName': res.data.fileName,
                        'orderId': me.$route.params.id
                    };
                    bizAPI.matchBankCertFile(params).then(result => {
                        me.$message({
                            message: result.data ? "匹配成功" : "匹配失败",
                            type: (result.code === '0000') ? 'success' : 'error'
                        });

                        //刷新
                        me.search();

                    })

                    me.loading = false;
                } else {
                    me.$alert(res.data, '提示')
                    me.loading = false;
                }
            },
            beforeBatchBankCertUpload(file) {
                console.error(file.type)
                let type = file.type
                const isJPG = (type.indexOf('image') !== -1)
                const isLt2M = file.size / 1024 / 1024 < 2
                /*if (!isJPG) {
                  this.$message.error('只能上传图片格式!')
                }*/
                if (!isLt2M) {
                    this.$message.error('上传的文件大小不能超过 2MB!')
                }
                this.loading = true;
                return isLt2M
            },
            search() {
                let me = this;
                let bizId = me.$route.params.id;

                console.log("bizId:" + bizId);
                console.log(me.$route.params);
                me.bizForm.id = bizId;
                if (bizId) {
                    bizAPI.qryOrderInfos({'id': bizId}).then(res => {
                        console.log(2222222222222222222222);
                        console.log(bizId);
                        console.log(res);

                        if (res.code === '0000') {
                            Object.assign(me.bizDomains, res);
                            me.$forceUpdate();
                        }

                        me.loading = false;
                    })
                } else {
                    me.loading = false;
                }
            },
            //确认订单
            confirmOrder() {
                let me = this;
                me.bodyLoading = true;
                bizAPI.prePayOrderInfos({'orderId': me.bizForm.id}).then(res => {

                    if (res.code === '0000') {
                        Object.assign(this.orderForm, res.data);
                        me.submitBtnDisabled = true;
                        me.bodyLoading = false;
                        me.dialogPayOrderVisible = true;
                    } else {
                        me.submitBtnDisabled = true;
                        me.bodyLoading = false;
                        this.$message.error(res.message);
                    }
                })


            },

            //退出支付界面
            canclePayOrder() {
                let me = this;
                this.$confirm('确定要退出支付吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    //确认
                    me.dialogPayOrderVisible = false;
                    me.submitBtnDisabled = false;

                }).catch(() => {
                    //取消

                });
            },

            //确认支付订单
            okPayOrder() {
                let me = this;
                me.bodyLoading = true;
                me.dialogPayOrderVisible = false;
                bizAPI.payOrder({'orderId': me.bizForm.id}).then(res => {
                    let title = (res.code === '0000') ? '支付成功' : '支付失败';
                    let message = "";
                    if (res.code === '0000') {
                        message = "支付金额：" + res.data.amountShow + "元  帐户余额：" + res.data.accountBalanceShow + "元";
                    }

                    me.$msgbox({
                        title: title,
                        message: message,
                        showCancelButton: false,
                        confirmButtonText: '确定',
                        type: (res.code === '0000') ? 'success' : 'error',
                        beforeClose: (action, instance, done) => {
                            done();
                            me.$router.push('/order/order_list/');
                        }
                    });

                    me.bodyLoading = false;
                })

            },
            //取消订单
            doCancleOrder() {
                let me = this
                this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    bizAPI.doCancle({'orderId': me.bizForm.id}).then(result => {
                        me.$message({
                            message: result.message,
                            type: (result.code === '0000') ? 'success' : 'error'
                        })
                        me.submitBtnDisabled = true;//提交订单按钮是否禁用
                        me.cancleBtnDisabled = true;//取消订单按钮是否禁用
                        me.$router.push('/order/order_list/');
                    })
                }).catch(() => {
                })
            }

        },
        mounted() {

        }
    }
</script>

<style scoped>
    .tit-6 {
        border-left: 6px solid #EB5E2B;
        font-size: 20px;
        line-height: 20px;
        padding-left: 10px;
        color: #EB5E2B;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 40px;
        text-align: center;
    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }

    .avatarList {
        width: 80px;
        height: 80px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }
</style>
